<template>
    <div class="cart">
        <h1>
            <i class="el-icon-shopping-cart-2"></i>
            ~~~~
        </h1>
        <div class="cart-body">

            <div class="cart-content">
                <div class="goods-list">
                    <div class="cart-header">
                        <h2>全部商品({{ cart.length }})</h2>
                        <div class="checkedAll">
                            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        </div>
                    </div>
                    <div class="all-goods hide-scrollbar">

                        <!-- <h1 v-for="item in 10" :key="item">12345</h1> -->
                        <ListItem v-for="item in cart" :key="item.id" :cart="item" @changeCount="changeCount"
                            @checkStateChange="checkStateChange" @delectGoods="delectGoods"></ListItem>
                        <el-empty description="暂无商品~" v-if="cart.length < 1"></el-empty>
                    </div>
                </div>
                <div class="total">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span class="bold">结算明细</span>
                            <span class="choose">已选 <span class="bold">{{ checkedArr.length }}</span> 件商品</span>
                        </div>
                        <div class="bd">
                            <img :src="item.productImg" alt="" v-for=" item  in  checkedArr " :key="item.id">
                            <!-- <el-empty description="暂无数据~" v-if="sum == 0"></el-empty> -->
                            <div class="empty" v-if="sum == 0">还没有待结算的商品~</div>

                        </div>
                        <div class="footer">
                            <div class="left">
                                合计：<span>￥</span><i>{{ sum }}</i>
                            </div>
                            <div class="right">
                                <el-button type="warning" size="medium" @click="pay">结算</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import ListItem from './list_item/index.vue'
export default {
    name: 'Cart',
    components: {
        ListItem
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            checkAll: '',
            active: 1,
            isPay: 0
        }
    },
    computed: {
        ...mapState('cartStore', ['cart']),
        ...mapGetters('cartStore', ['checkCount', 'sum', 'checkedArr'])
    },
    watch: {

    },
    mounted() {
        this.getCartData()
    },
    methods: {
        ...mapMutations('cartStore', ['getCartData', 'editCartGoods', 'changeCheckState', 'CheckAllChange', 'delectCartGoods']),
        handleCheckAllChange(newState) {
            this.CheckAllChange(newState)
        },
        changeCount(good) {
            this.editCartGoods(good)
        },
        checkStateChange(good) {
            this.changeCheckState(good)
        },
        delectGoods(id) {
            this.delectCartGoods(id)
        },
        pay() {
            if (this.checkedArr.length <= 0) {
                this.$message({
                    type: 'warning',
                    message: '还没有选择要购买的商品哦~'
                });
            } else {
                this.$router.push({
                    path: '/confirm_order',
                    query: {
                        num: 'nums'
                    }
                })
                localStorage.setItem('isPay', JSON.stringify(this.isPay))
                localStorage.setItem('active', JSON.stringify(this.active))
            }
        }
    }
};
</script>
<style lang='less' scoped>
.cart {
    width: 100%;
    max-height: 640px;
    min-height: 647px;
    background-color: #f3f6f8;
    margin-top: -10px;

    h1 {
        width: 80%;
        margin: 0 auto;
        font-size: 60px;
        color: #ff5000;
        padding-top: 20px;

        .el-icon-shopping-cart-2 {
            font-weight: bold;
        }
    }


    .cart-body {
        width: 80%;
        margin: -10px auto;


        .cart-content {
            display: flex;
            margin-top: 20px;
            justify-content: space-between;


            .goods-list {
                width: 850px;
                background-color: white;

                .cart-header {
                    padding: 10px;

                    .checkedAll {
                        padding-left: 20px;
                    }

                    h2 {
                        width: 100%;
                        line-height: 40px;
                        padding: 10px;
                        font-weight: 800;
                        color: #333;
                        font-size: 16px;
                        background-color: white;
                    }
                }


                .all-goods {
                    max-height: 455px;
                    overflow-y: auto;
                    background-color: white;
                    padding: 30px 30px 0 30px;

                }
            }

            .total {
                width: 350px;

                .box-card {
                    .bold {
                        font-weight: bold;

                    }

                    .choose {
                        margin-left: 10px;
                        font-size: 14px;
                    }

                    .bd {
                        height: 120px;
                        overflow-y: auto;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        flex-wrap: wrap;

                        img {
                            width: 80px;
                            height: 80px;
                            border-radius: 5px;
                            margin-bottom: 10px;
                        }

                        .empty {
                            color: #d4d3d3;
                            font-size: 12px;
                        }
                    }

                    .footer {
                        border-top: 1px solid #e7e7e7;
                        display: flex;
                        justify-content: space-between;
                        padding-top: 10px;

                        .left {
                            font-weight: bold;
                            max-width: 230px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            text-wrap: nowrap;
                            background-color: white;

                            span {
                                font-size: 14px;
                                color: #ff5000;
                            }

                            i {
                                color: #ff5000;
                                font-size: 28px;
                            }

                        }

                        .right {
                            .el-button--warning {
                                font-weight: bold;
                                background-color: #ff5000;
                            }
                        }
                    }
                }
            }
        }
    }

    /* 隐藏滚动条但仍可滚动 */
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
        /* 对于Webkit浏览器 */
    }

    .hide-scrollbar {
        scrollbar-width: none;
        /* 对于IE和Edge */
    }

    /* 兼容Firefox */
    .hide-scrollbar {
        overflow: auto;
    }
}
</style>